<template>
    <div class="dialogcontent">
        <el-table
            id="planprecntr-table-planprecntr"
            ref="tableRef"
            :data="tableData"
            v-bind="tableDefaultAttribute"
            row-key="id"
            :max-height="tableHeight"
            table-layout="auto"
        >
            <template #empty>
                <span>无数据</span>
            </template>
            <el-table-column type="selection" width="55" :align="'center'" />
            <template v-for="col in tableColumns" :key="col.prop">
                <el-table-column
                    v-if="!col.isHidden"
                    :align="col.align"
                    :prop="col.prop"
                    :label="col.label"
                    :formatter="col.formatter"
                    :type="col.type"
                    :fixed="col.fixed"
                    :width="col.width"
                    :sortable="col.sortable"
                >
                    <template
                        v-if="col.formFieldItemType === 'boolean'"
                        #default="scope"
                    >
                        <el-switch
                            v-model="scope.row[`${col.prop}`]"
                            :active-value="'Y'"
                            :inactive-value="'N'"
                        />
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-button-group class="bg">
            <el-space>
                <el-button
                    class="btn"
                    type="primary"
                    
                    @click="addCntrs"
                    >增加</el-button
                >
                <el-button
                    class="btn"
                    type="primary"
                    
                    @click="onDelete"
                    >删除</el-button
                >
                <el-dropdown @command="handleCommand">
                    <el-button type="primary">
                        导出 Excel<el-icon class="el-icon--right"
                            ><arrow-down
                        /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="current"
                                >当前页</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-space>
        </el-button-group>
    </div>
    <el-dialog
        v-model="dialogAddCntrsVisible"
        title="预定箱号"
        draggable
        destroy-on-close
    >
        <CntrTextArea @save="onAddCntrs"></CntrTextArea>
    </el-dialog>
</template>
<script setup lang="ts" name="PlanPreCntr">
import { ref, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
// import { Delete, Plus } from '@element-plus/icons-vue';
import { forEach, forEachRight, includes, isEmpty } from 'lodash';
import { tableMaxHeightAdjust } from '@/common/const';
import { Request } from '@/app/request';
import { PlanPreCntr } from '@/common/types/container';
import { tableColumnDefault, tableDefaultAttribute } from '@/hooks/useTable';
import { TableColumn } from '@/common/types/app';
import { useAppStore } from '@/store/app';
import { exportExcel, transFormatter } from '@/common/tools';
import CntrTextArea from './CntrTextArea.vue';
import { ElMessage, ElMessageBox, TableInstance } from 'element-plus';
const dialogAddCntrsVisible = ref(false);
const { SelectOptionYN } = storeToRefs(useAppStore());
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'used_id') {
        data = SelectOptionYN.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableRef = ref<TableInstance>();
const tableData = ref<Array<PlanPreCntr>>([]);

const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'cntr',
        label: '箱号',
        formFieldItemType: 'input',
        sortable: true,
        width: 180,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'used_id',
        label: '已完成',
        formFieldItemType: 'input',
        formatter: onFormatter,
        sortable: true,
        width: 120,
    } /* ,
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'remark',
        label: '备注',
        formFieldItemType: 'input',
        width: 200,
    } */,
]);
const tableHeight = ref(100);
const props = defineProps<{
    truck_sn: number;
    plan_type: string;
}>();
const emit = defineEmits<{
    close: [];
}>();
const onRefresh = async () => {
    const req = new Request('查询计划预定箱号', {
        plan_id: props.truck_sn,
    });
    const r = await req.post();
    tableData.value.length = 0;
    if (!isEmpty(r.obj)) {
        tableData.value = r.obj;
    }
};
onMounted(async () => {
    tableHeight.value = window.innerHeight - tableMaxHeightAdjust * 2;
    await onRefresh();
});
const addCntrs = () => {
    dialogAddCntrsVisible.value = true;
};
const onAddCntrs = async (cntrs: string) => {
    const cntrArray = cntrs.split(/','|\n|\s/);
    let req: any;
    console.log(props.plan_type);
    
    switch (props.plan_type) {
        case 'EIDXJC':
        case 'ESPTID':
            req = new Request('进场计划增加预定箱号', {
                plan_id: props.truck_sn,
                cntrs: cntrArray,
            });
            break;
        case 'EODXCC':
            req = new Request('出场计划增加预定箱号', {
                plan_id: props.truck_sn,
                cntrs: cntrArray,
            });
            break;
        case 'EOQZCC':
            req = new Request('起租计划增加预定箱号', {
                plan_id: props.truck_sn,
                cntrs: cntrArray,
            });
            break;
        case 'EITZJC':
            req = new Request('退租计划增加预定箱号', {
                plan_id: props.truck_sn,
                cntrs: cntrArray,
            });
            break;
        case 'EOZYXC':
            req = new Request('站间调箱出场计划增加预定箱号', {
                plan_id: props.truck_sn,
                cntrs: cntrArray,
            });
            break;
        case 'EIZYXT':
            req = new Request('站间调箱进场计划增加预定箱号', {
                plan_id: props.truck_sn,
                cntrs: cntrArray,
            });
            break;
        default:
            ElMessage.info({
                message: '非法的计划类型',
            });
            break;
    }

    const r = await req.post();
    // tableData.value.length = 0;
    if (!isEmpty(r.obj)) {
        tableData.value = r.obj;
        dialogAddCntrsVisible.value = false;
    }
};
const onDelete = async () => {
    const rows: Array<PlanPreCntr> = tableRef.value?.getSelectionRows() || [];
    if (rows.length === 0) {
        ElMessage.info({
            message: '请选择要删除数据',
        });
        return;
    }
    const ids = Array<number>();
    const labels = Array<string>();
    forEach(rows, (v: PlanPreCntr) => {
        ids.push(v.id as number);
        labels.push(v.cntr as string);
    });

    const msg = labels.join(',     ');
    // const delids = ids.join(',');
    const cr = await ElMessageBox.confirm(msg, '确认删除如下箱号', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            return true;
        })
        .catch(() => {
            return false;
        });
    if (cr) {
        //
        const req = new Request('计划预定箱删除', { ids });
        const r = await req.post();
        if (r.code > 100) {
            forEachRight(tableData.value, (v: PlanPreCntr, i: number) => {
                if (includes(ids, v.id)) {
                    tableData.value.splice(i, 1);
                }
            });
        }
    }
};
const handleCommand = () => {
    exportExcel('planprecntr-table-planprecntr');
};
</script>
<style lang="scss" scoped>
.dialogcontent {
    margin: 10px;
}
.bg {
    margin-top: 10px;

    .btn {
        margin-right: 10px;
    }
}
</style>
